homepage6047　2019年 1月

プログラミングやRPG（作るほう）が好きな人の日記

2019/1/30（水）

H8マイコン 3052F を初めて使ってみる（LAN開発キット）-[kumitate]

マイコンというのは、パソコンのCPUと同じようなもので、炊飯器や、高機能な湯沸かし器などいろいろな家電の中に入っていて、プログラムで家電を便利に操作してくれる電子回路部品です。電子工作では好きなプログラムをマイコンに書き込んで、創意工夫でいろいろなものを作ることができます。

どうしてLAN機器開発キットなのかというと、もうすぐ国家資格の「電子機器組立て1級」の資格取得の時期なんですが、ぜんぜんやる気がわいてこないんです。

そこで、自分への「てこ上げ」として、とりあえず何か電子工作をやってみようと思ったわけです。

で、私が失業してハローワークの電子回路エンジニア科を受講したときにもらった教科書（「C言語による組込み制御入門講座」という本があって、その本がまだ（長年）未着手だったので、これをやろうと思いました。

その本で取り扱っているマイコンが日立製作所H8マイコン3052Fだったというわけです。秋月電子通商で同マイコンを探したところ、手ごろだったのがLAN開発キットでした。

H8/3052Fはもうだいぶ古いマイコンと言われていますが、工業（産業）の世界では3052と同じシリーズで型番の少し違うものがまだ使われているって話を最近聞きました。枯れたシステム（完成されたシステム）では、わざわざ新しいものに変えることはなく、そのままの材料で作るのがベストだということでしょう。

古いマイコンとはいえ、マイコンとして完成されており、まだ使えるのに、古いというだけで「使えない」とされるのはもったいない気がします。でも新しいマイコンが次々と出てきて、古いマイコンの開発環境が更新されないまま古くさくなり、サポートも減って、その辺が「使えない」となってしまうんでしょう。

仕事でどことなく関係しているので、面白いと思っています（やる気が出始め）

2019/1/14（月）　３連休３日目

上のメニューの aboutThisWebsite.html の「感想、意見 送信フォーム」でエラー表示（Internal Server Error）になっていましたが修正しました。

2019/1/12（土）　３連休１日目　

Movie + Canvas -[javascript]

KONAMI のシューティングゲーム「グラディウスV」のスーパープレイのYouTube動画に衝撃を受けました。ゴージャスってこういうのを言うんだなと。

（プレイ動画の著作権の考え方：参考サイト「ゲームソフトの著作権について」）

で、背景に動画（？）を使っているのを見て、動画（VIDEOタグ）と JavaScript の CANVAS を重ねられないかなと思ってやってみようと思いました。

それは結果としてできたんですが、それ以前に大事なことがあると思いました。

スーパープレイ動画の開始１２秒から１７秒までの５秒のあいだに、背景のアングルが大きく ぐるっ と変わるんですが、このカメラの魅力的な動き、普通はどうやるのか見当つかないと思うんです。

背景に動画を使うようなカラクリの話よりも、ダイナミックで魅力的な表現について説明するほうがニーズが高く、そこをほったらかしにするのは NG のような気がしました。

これから説明しますので、なるほどそういうことか、とわかってもらえれば幸いです。

動画と CANVAS を重ねる話はそのあとでしています。

（自機の当たり判定なし、無限ループ）

背景のアングルが大きく ぐるっ と変わる。どうやるの？

---

説明ステップ　１／４

主に動画を説明材料にして説明していきます。

しかし、まず最初は動画ではなく、「カメラを動かさない状態」を見ていただくと、こんな感じです。

編集中： 画像をクリックすると拡大して表示します。

レンダリング結果： ※カメラは動かないので動画ではありません。

上記 「編集中：」の画像の下のほうの線画の赤い物体が「カメラ」で、図の上のほうを向いている状態です。（下図に抜粋）

この状態からカメラワークのアニメを順番に加えていきます。

---

説明ステップ　２／４

リング内を旋回するアニメを加えます。

カメラの位置だけを変更するアニメであり、首を振るアニメではないので、カメラは常に図の上を見ながら、リング内を回ります（下図赤矢印）。

編集中： 画像をクリックするとカメラの動きを表示します。 （MP4: 1.89MB）

レンダリング結果： (MP4: 600KB)

リング内を回るのは、上図の「編集中：」の動画の右側のツリー表示で、「①パス（カメラ旋回移動用）」というフォルダの下に「カメラ」を入れているからそのように回ります。（下図に抜粋）

（※細かいアニメの設定はこのような画面で別途行います）

こういう単純な回転だけなら難しいことはないと思います。

（※Shade3Dのこの「フォルダ」は "ジョイント パート" という呼び名で、中に入れたものはそのフォルダの機能の影響を受けます。例えばフォルダが「回転」の機能を持つなら中に入れたものはフォルダの設定値を動かすことで回転ができるようになります）

（※なお、「パス」というのは、Shade3Dで「用意したパスの線形状に沿って形状の移動を制御する」と説明されています。

---

説明ステップ　３／４

今度はカメラはリングの中心を見ながら、リング内を回ります。

（このレンダリング結果ならゲームの背景にしても良さそうです）

編集中： 画像をクリックするとカメラの動きを表示します。 （MP4: 2.33MB）

レンダリング結果： (MP4: 556KB)

上図の「編集中：」の動画の右側のツリー表示を見てもらうと、「①パス（…）」のフォルダの下にさらに「②回転（中心注視回転用）」というフォルダを作っているのがわかると思います。 （下図に抜粋）

これで、「カメラ」はリング内を旋回（いわゆる公転）しつつも、中心を見るように自転もしている、というアニメになります。

なお、下の自転だけにした動画を見てもらうと、「②回転（中心注視回転用）」によって自転だけしている　というのがわかると思います。

(MP4: 1.77MB)

リング内を旋回して、自転もする。

これもまぁ、ふつうの回転であって、難しいことはないと思います。

ではグラディウスVみたいに、背景のアングルが大きく ぐるっ と変わるのはどうやるんでしょうか。

　リングの中心を見ていない、こういうアングルですね。

---

説明ステップ　４／４

カメラがリングの左上くらい（下図）まで回ってきたところで、向いている方向をリングの中央ではなく、回ってきた道すじのほうを見るように（濃い青の矢印）アニメを追加します。

編集中： 画像をクリックするとカメラの動きを表示します。 （MP4: 3.19MB）

レンダリング結果：　（目的達成） (MP4: 728KB)

上図の「編集中：」の動画の右側のツリー表示を見てもらうと、フォルダ「①パス（…）」によるリング内旋回と、その下の「②回転（…）」で自転を行い、さらにその下に「③回転（左右首振り用）」というフォルダを作っていて、その下に「カメラ」があります。（下図に抜粋）

その「③回転（左右首振り用）」フォルダは「ある場所まで来たらちょっと首を後ろに振ってくれ」というような設定を別途行っています。正直ちょっとわかりづらい画面だと思うんですが下図のように設定しています。

ちょっと難しいですかね。これで上の「レンダリング結果：（目的達成）」のような動画になります。

つまり、今までの説明を要約すると「カメラの位置を変更（リング内を旋回）しつつ、ある時点でカメラの向いている向きをちょっと変えるんだ」ということです。一言で言うと「カメラの首を振れば良い」です。

わざわざここまで動画と画像を駆使して説明することもないんですが、私が一人で分かっていてこのページを見ている皆さんが「どうやるんだろう」と思いつつも分からないでいるというのは一番力を入れて解決すべきことだと思ったので頑張って説明しました。

Movie + Canvas 大まかな実現方法　（これがもともとの本題）：

• 動画を MP4 形式等で用意します。
• VIDEO タグと CANVAS タグをそれぞれ style で position:absolute にして、それぞれの left と top を同じ値にして重なるようにします。
• VIDEO タグの上に CANVAS が来るように、VIDEO タグ、CANVAS タグの順で HTML を記述します。
• CANVAS は style で background-color を指定しません。（背景を透明にしたいので）
• Google Chrome では VIDEO タグで muted という属性を入れないと JavaScript の play() で再生されません。

つまり、単純に重ねればよいということです。

新しいウィンドウで実行　新しいウィンドウでMP4を表示(MP4: 1.57MB) 　

一連のファイルをまとめたZIP（1.94MB）です。おてもとで動かせます。
このシューティングゲームのプログラムリストです。

「グラディウスV」でシューティングゲームの背景を動画（…ではなくリアルタイムのレンダリング？）にしてしまうなんてコナミの開発者の方はすごいことを考えたもんですね。

動画とゲームを融合させるというのはもとはスクエア・エニックスがファイナルファンタジー７で始めたことで（動画の最後の画面でそのままゲーム開始される）、パラサイトイヴ２では動画の再生中に動画の中のパースに合わせてキャラを操作することができたとか。

2019/1/5（土）　年末年始休み　９日目／１０日

iTunes で映画「Mission:Impossible Fallout」を観ました -[eiga]

（2018年アメリカ／アクション,アドベンチャー／2:27／一般評価★★★★☆／私評価★★★★☆）

全体的に出来が良い気がします。

シリーズを面白い順に並べると、

１ → 6(今作) → 5（シンジケート） → 4（クレムリン爆破） → 3（ラビットフット） → 2（キメラ） です。

１作目が一番面白くて、２作目で大きく落として、シリーズを進めるごとに良くなってるみたいです。

でもそれでも今作も私が求めている１作目の痛快さがなく、普通のアクション映画っていう印象がぬぐえないかな。

良いところを言うと、雪山でヘリが転がるとき、転がってる最中のヘリの機内の はげしい様子がスゴくて、どうやって撮影しているんだろうと思いました。

iTunesサイト 「ミッション：インポッシブル フォールアウト」

2019/1/2（水）　年末年始休み　６日目／１０日

エレガントなプログラム -[program]

2019/1/1（火）　年末年始休み　５日目／１０日

アニメーションプログラムの例 -[javascript]

良いところ：

• たとえば直立姿勢からおじぎをする場合を考えると、「直立姿勢」と「おじぎをした状態」の２つのポーズデータ（静止状態のデータ）を用意すれば、あとはその２つの姿勢の補間を行うだけでアニメーションになる。そういう方式でアニメーションしている。直感的に自由に、迫力のあるアニメができるんじゃないかと思います。
• 時間を指定して、アニメーションできる。１秒でおじぎ、２秒でおじぎ、というような指定ができる。
  setIntervalの時間の値を変更しても、アニメの１秒でおじぎ、２秒でおじぎという動きは変わらない。
• 動かす対象を「"オブジェクト" の "メンバ変数" の "値"」としているので、汎用的になっている。たとえば、
  オブジェクト　document.getElementById( "red" ).style　の、
  メンバ変数　left
  の値を現在値から指定値まで動かす、という処理をしている。

良くないところ：

• 動き方が直線的で、放物線などの動きがない。
• ポーズからポーズへ切り替える際、条件で別のポーズにする機能（スクリプト）がない。
• 時間指定しているが、たとえば１秒を指定すると１秒ちょっとかかり、時間が正確ではない。

そのプログラムリスト：

<!DOCTYPE html><!--ESCAPEPROCESS-->

<head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<title>UntitledHomepage6047JavaScript</title>

<script>

console.clear();

console.log( "=============== script ==============" );

//単位を除去する。（Delete Unit）

function DU( value ) { return Number( value.replace( "px", "" ) ); }

function onloadx() {

timerMS = 50;

//各ポーズの作成

pose1 = new Pose( "pose1", 500 );

pose1.add( document.getElementById( "red" ).style, "left", 500 ),

pose1.add( document.getElementById( "green" ).style, "left", 500 ),

pose1.add( document.getElementById( "green" ).style, "top", 500 ),

pose1.add( document.getElementById( "blue" ).style, "top", 500 ),

/*

各ポーズのおおまかなデータ構造

pose1 ... new Pose

pose1.acts ... new Array

0 ... new Act HTML要素"red"のstyleのメンバ変数leftについて現在値から500まで値を変化させる

1 ... new Act 同様

2 ... new Act 同様

3 ... new Act 同様

pose2

：

：

*/

pose2 = new Pose( "pose2", 1300 );

pose2.add( document.getElementById( "red" ).style, "top", 500 ),

pose2.add( document.getElementById( "green" ).style, "top", 0 ),

pose2.add( document.getElementById( "blue" ).style, "left", 500 ),

pose3 = new Pose( "pose3", 500 );

pose3.add( document.getElementById( "red" ).style, "left", 0 ),

pose3.add( document.getElementById( "red" ).style, "top", 0 ),

pose3.add( document.getElementById( "green" ).style, "left", 0 ),

pose3.add( document.getElementById( "green" ).style, "top", 500 ),

pose3.add( document.getElementById( "blue" ).style, "top", 0 ),

pose4 = new Pose( "pose4", 1300 );

pose4.add( document.getElementById( "red" ).style, "left", 0 ),

pose4.add( document.getElementById( "red" ).style, "top", 0 ),

pose4.add( document.getElementById( "green" ).style, "left", 0 ),

pose4.add( document.getElementById( "green" ).style, "top", 0 ),

pose4.add( document.getElementById( "blue" ).style, "left", 0 ),

pose4.add( document.getElementById( "blue" ).style, "top", 0 ),

//シーケンス作成　（あるポーズを取ったら、次のポーズへ向かって値を遷移させる）

pose1.nextPose = pose2;

pose2.nextPose = pose3;

pose3.nextPose = pose4;

pose4.nextPose = pose1;

currentPose = pose1;

currentPose.ready();

timerID = setInterval( frame, timerMS );

}

//１フレーム分の動作

function frame() {

currentPose.frame();

//check.　ポーズが完了したら次のポーズへ

if( currentPose.endFlg ) {

currentPose = currentPose.nextPose;

currentPose.ready();

}

}

//クラス１：　１つのポーズを形作る、Actの集合

function Pose( title, time ) {

/*

time この時間内にアニメーションを終わらせる

*/

this.title = title;

this.time = time;

this.acts = new Array();

this.endFlg = false;

}

//actsにActを追加する

Pose.prototype.add = function( object, objectMember, endValue ) {

this.acts.push( new Act( object, objectMember, endValue, this.time ) );

}

//１フレーム分の動作

Pose.prototype.frame = function() {

//すべてのActが終了したら、このポーズは完了

var allEnd = true;

for( var i = 0; i < this.acts.length; i++ ) {

var act = this.acts[ i ];

if( ! act.endFlg ) {

allEnd = false;

break;

}

}

if( allEnd ){

this.endFlg = true;

return;

}

//Actを進行

for( var i = 0; i < this.acts.length; i++ ) {

this.acts[ i ].frame();

}

}

//現在の状況（DOMの現在値）に合わせて、初期化

Pose.prototype.ready = function() {

console.log( this.title + " へ" );

for( var i = 0; i < this.acts.length; i++ ) {

this.acts[ i ].ready();

}

this.endFlg = false;

}

//クラス２：　オブジェクトのあるメンバ変数を、現在値からendValueまで、time時間かけて遷移させる

function Act( object, objectMember, endValue, time ) {

this.object = object;

this.objectMember = objectMember;

this.endValue = endValue;

this.time = time;

this.direction = 0;

this.step = 0;

this.endFlg = false;

}

//現在の状況に合わせて、初期化

Act.prototype.ready = function() {

//現在値から目標値までの距離

var len = this.endValue - DU( this.object[ this.objectMember ] );

//check.すでに到達

if( len == 0 ) {

this.endFlg = true;

return;

}

this.direction = len > 0 ? 1 : -1;

this.step = len / ( this.time / timerMS );

this.endFlg = false;

}

//１フレーム分の動作

Act.prototype.frame = function() {

this.increment();

}

//進行

Act.prototype.increment = function() {

if( this.object[ this.objectMember ].match( /px/ ) )

this.object[ this.objectMember ] = ( DU( this.object[ this.objectMember ] ) + this.step ) + "px";

else

this.object[ this.objectMember ] += this.step;

this.endFlg = DU( this.object[ this.objectMember ] ) * this.direction >= this.endValue * this.direction;

//check.終了の場合は、余分な移動を補正する

if( this.endFlg ) {

if( this.object[ this.objectMember ].match( /px/ ) )

this.object[ this.objectMember ] = this.endValue + "px";

else

this.object[ this.objectMember ] = this.endValue;

}

}

</script>

<style>

</style>

</head>

<body onload="onloadx();" style="background-color:white;">

<div id="red" style="

position : absolute;

background-color : red;

left : 0px;

top : 0px;

width : 32px;

height : 32px;

opacity : .5;

"></div>

<div id="green" style="

position : absolute;

background-color : green;

left : 0px;

top : 0px;

width : 32px;

height : 32px;

opacity : .5;

"></div>

<div id="blue" style="

position : absolute;

background-color : blue;

left : 0px;

top : 0px;

width : 32px;

height : 32px;

opacity : .5;

"></div>

</body>

</html>

（このプログラムは著作権を特に主張しませんので気に入ったら自由にコピペして使ってください）

---

Google Playで映画「シャッフル」を観ました -[eiga]

（2007年アメリカ／サスペンス／1:36／一般評価★★★☆☆／私評価★★★★★）

人間ドラマとしてしっかりしているし、SF（起こりそうも無い事を起こりそうに描いたもの）としても楽しめると思います。人間ドラマを見て泣いたことがある人は、この映画はおススメです。埋もれた名作だと思ったんだけど、私が一人でそう思っているだけなのかな。

Google Play 「シャッフル」

---

webappsrcの確認